<template>
	<div>
		<div class="header">
			<div class="headerone">
				<router-link to='/'>
					<span class="iconfont icon-zuojiantou"></span>
				</router-link>
				<span class="header_tex">城市选择</span>
				<span></span>
			</div>
			<!-- 搜索框 -->
			<div class="header_bottom">
				<div class="header_bottomsec">
					<input type="text" placeholder="请输入城市名称" v-model="q">
				</div>
			</div>
		</div>
		<!-- 搜索框渲染城市 -->
		<div class="az posi" v-show="q">
			<ul class="detailul">
				<li class="detailulli" v-for="item in souarr" :key="item.id">{{item.name}}</li>
			</ul>
		</div>
		<!-- wrapper为弹性效果 -->
		<div class="wrapper" v-show="!q">
			<div class="content">
				<div class="local">
					<span>当前城市</span>
					<div>
						<span class="localcity">{{prov}}</span>
					</div>
				</div>
				<!-- 热门城市 -->
				<div>
					<span class="hottit">热门城市</span>
					<ul class="hotCity">
						<li v-for="item in info" @click="beijing">
							{{item.name}}
						</li>
					</ul>
				</div>
				<!-- 详细城市 -->
				<div v-for="(item,index) in list" :key="index" class="detailTTT">
					<span :ref="index">{{index}}</span>
					<ul class="detailul">
						<li class="detailulli" v-for="item2 in item" :key="item2.id">
							{{item2.name}}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Pub from '../public.js'
	import BScroll from 'better-scroll'
	import axios from 'axios'
	export default {
		name: 'HotCity',
		data() {
			return {
				info: null,
				prov: "加载中...",
				list: "",
				souarr: [],
				q: "",
			};
		},
		props:["azstr"],
		methods: {
			beijing(e) {
				console.log(e)
				this.$router.push('/')
				// 第三方的vuex 状态管理器
				//vux是移动端的框架
				this.$store.commit('cityevent', e.target.innerText)
				// console.log(e.target.innerText)
			},
			ready() {
				const geolocation = new BMap.Geolocation();
				var _this = this
				geolocation.getCurrentPosition(function getinfo(position) {
					var city = position.address.city; //获取城市信息        
					var province = position.address.province;
					_this.prov = city
					// 在A组件中通过$emit 调用自定义函数并传参
					Pub.$emit('getBmapCity', city)
				}, function(e) {
					alert("获取百度定位位置信息失败");
				}, {
					provider: 'baidu',
				});
			},
			getCitydata() {
				// 两个参数,一个是地址,第二是回调函数，与.then 相同
				axios.get("/api/city.json")
					.then(res => {
						this.info = res.data.data.hotCities
						this.list = res.data.data.cities
					})
			},
		},
		watch: {
			// 楼层滚动效果
			azstr(){
				this.scroll.scrollToElement(this.$refs[this.azstr][0],500)
				// console.log(this.$refs)
			},
			q() {
				if (!this.q) {
					return this.souarr
				}
				if (this.q) {
					let kongarr = []
					this.timer = setTimeout(() => {
						// console.log(this.list)
						for (let i in this.list) {
							for (let j = 0; j < this.list[i].length; j++) {
								if (this.list[i][j].name.indexOf(this.q) != -1 || this.list[i][j].spell.indexOf(this.q) != -1) {
									kongarr.push(this.list[i][j])
								}
							}
						}
						this.souarr = kongarr
						return this.souarr
					}, 300)
				}
			}
		},
		// 初始化,只渲染一次
		mounted: function() {
			this.scroll = new BScroll('.wrapper')
			this.getCitydata()
			this.ready()
		}
	}
</script>

<style scoped>
	.wrapper {
		position: absolute;
		top: .73rem;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.header {
		width: 100%;
		height: .65rem;
		background: #00BCD4;
		color: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding-left: .1rem;
		flex-wrap: wrap;
	}

	.headerone {
		width: 100%;
		height: .34rem;
		display: flex;
		justify-content: flex-start;
	}

	.icon-zuojiantou {
		font-size: .16rem;
		width: 10%;
		margin-right: .2rem;
	}

	.header_tex {
		width: 80%;
		text-align: center;
	}

	.header_bottom {
		width: 100%;
		height: .3rem;
		background: #00BCD4;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header_bottomsec {
		width: 2.75rem;
		height: .2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		border: .015rem solid white;
	}

	.header_bottomsec input {
		width: 100%;
		height: 100%;
	}

	.header_bottomsec1 {
		width: 50%;
		background: white;
		color: #00BCD4;
		text-align: center;
	}

	.header_bottomsec2 {
		width: 50%;
		background: #00BCD4;
		color: white;
		text-align: center;
	}

	.local {
		width: 100%;
		margin: .1rem 0;

	}

	.local>span {
		font-size: .12rem;
		padding-left: .2rem;
		box-sizing: border-box;
		margin: .2rem 0;
	}

	.local div {
		background: white;
		width: 100%;
	}

	.localcity {
		font-size: .16rem;
		padding: 0 .2rem;
		border: 1px solid gainsboro;
		box-sizing: border-box;
	}

	.hottit {
		font-size: .12rem;
		margin-left: .2rem;
		box-sizing: border-box;
	}

	.hotCity {
		width: 100%;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: wrap;
	}

	.hotCity li {
		width: 33%;
		height: .44rem;
		border-right: .01rem solid #DFDFDF;
		border-bottom: .01rem solid #DFDFDF;
		list-style: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	a {
		color: white;
		text-decoration: none;
	}

	.zhezhao {
		width: 100%;
		height: 2rem;
		z-index: 100;
		background: red;
		position: relative;

	}

	.detailul {
		width: 100%;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: wrap;
		list-style: none;
		background: white;
	}

	.detailulli {
		width: 100%;
		height: .3rem;
		line-height: .3rem;
		border-bottom: .5px solid gainsboro;
	}

	.detailTTT span {
		margin-left: .2rem;
		box-sizing: border-box;
	}

	.detailul li {
		margin-left: .2rem;
		box-sizing: border-box;
	}

	.posi {
		position: absolute;
	}
</style>
